<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除元素</title>
    <script src="../../lib/jquery-3.4.1.js"></script>

    <style>

        #div1{

            width: 250px;
            height: 200px;
            background-color: yellowgreen;
        }

        #div2{

            width: 250px;
            height: 200px;
            background-color: palevioletred;

        }


    </style>



</head>
<body>

<div id="div1">

    骑上我心爱的小摩托<b>div1</b>
    <p>这是段落1</p>
    <p>这是段落2</p>

</div>

<hr>

<div id="div2">

    超级小智<b>还有谁</b>
    <p>这是段落1</p>
    <p>这是段落2</p>

</div>


<hr>

<button id="btn1">删除被选元素</button>
<button id="btn2">删除被选元素的子元素</button>



<script>

    $(document).ready(function () {


        $("#btn1").click(function () {

            $("#div1").remove();

        });

        $("#btn2").click(function () {

            $("#div2").empty();
        });

    });




</script>




</body>
</html>